<template>
  <div class="app-container">
    <el-table :data="filterTableData" style="width: 100%">
      <el-table-column label="学号" prop="stu_id" />
      <el-table-column label="姓名" prop="stu_name" />
      <el-table-column label="班级" prop="class_name" />
      <el-table-column label="系别" prop="dep_name" />
      <el-table-column label="学院" prop="col_name" />
      <el-table-column label="结果" prop="result" />
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="small" placeholder="Type to search" />
        </template>
        <template #default="scope">
          <el-button size="small" @click=";(drawer1 = true), handleEdit(scope.row)">Edit</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" style="margin-left: 20px" @click=";(drawer2 = true), add()"> + </el-button>
    <el-drawer v-model="drawer2">
      <template #title>
        <h4>增加一名学生</h4>
      </template>
      <template #default>
        <div>
          <div style="margin: 20px" />
          <el-form label-width="100px" style="max-width: 460px" :model="stud" :rules="addRules">
            <el-form-item label="学院" prop="col_name">
              <el-input v-model="stud.col_name" />
            </el-form-item>
            <el-form-item label="专业" prop="dep_name">
              <el-input v-model="stud.dep_name" />
            </el-form-item>
            <el-form-item label="班级" prop="class_name">
              <el-input v-model="stud.class_name" />
            </el-form-item>
            <el-form-item label="学号" prop="stu_id">
              <el-input v-model="stud.stu_id" />
            </el-form-item>
            <el-form-item label="姓名" prop="stu_name">
              <el-input v-model="stud.stu_name" />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">cancel</el-button>
          <el-button type="primary" @click="confirmClick">confirm</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- 修改学生信息 -->
    <el-drawer v-model="drawer1">
      <template #default>
        <h4>信 息 修 改</h4>
        <div class="content">
          <el-form :model="editstu" :rules="editRules">
            <el-form-item prop="stu_name">
              <el-input v-model="editstu.stu_name" placeholder="姓名" type="text" tabindex="3" size="large" />
            </el-form-item>
            <el-form-item prop="col_name">
              <el-input v-model="editstu.col_name" placeholder="学院" type="text" tabindex="4" size="large" />
            </el-form-item>
            <el-form-item prop="dep_name">
              <el-input v-model="editstu.dep_name" placeholder="专业" type="text" tabindex="5" size="large" />
            </el-form-item>
            <el-form-item prop="class_name">
              <el-input v-model="editstu.class_name" placeholder="班级" type="text" tabindex="6" size="large" />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelEdit">cancel</el-button>
          <el-button type="primary" @click="confirmEdit">update</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { useUserStore } from "@/store/modules/user"
import { computed, reactive, ref } from "vue"
import { request } from "@/utils/service"
import router from "@/router"
import { ElMessage, ElMessageBox, FormRules } from "element-plus"
type student = {
  stu_id: string
  stu_name: string
  class_name: string
  dep_name: string
  col_name: string
  result: string
}
const search = ref("")
const filterTableData = computed(() =>
  stus.value.filter((data) => !search.value || data.stu_name.toLowerCase().includes(search.value.toLowerCase()))
)
const editstu = reactive({
  stu_id: "",
  stu_name: "",
  class_name: "",
  dep_name: "",
  col_name: ""
})
const editRules = reactive<FormRules>({
  stu_name: [
    {
      required: true,
      message: "请输入姓名",
      trigger: "blur"
    }
  ],
  col_name: [
    {
      required: true,
      message: "请输入学院",
      trigger: "blur"
    }
  ],
  dep_name: [
    {
      required: true,
      message: "请输入专业",
      trigger: "blur"
    }
  ],
  class_name: [
    {
      required: true,
      message: "请输入班级",
      trigger: "blur"
    }
  ]
})
const drawer1 = ref(false)
const handleEdit = (row: student) => {
  editstu.stu_id = row.stu_id
  editstu.stu_name = row.stu_name
  editstu.col_name = row.col_name
  editstu.dep_name = row.dep_name
  editstu.class_name = row.class_name
}
function cancelEdit() {
  drawer1.value = false
}
function confirmEdit() {
  ElMessageBox.confirm(`是否修改学生`).then(() => {
    console.log(editstu)
    request({
      url: "/student",
      method: "put",
      data: editstu
    })
    drawer1.value = false
  })
}
const handleDelete = (index: number, row: student) => {
  ElMessageBox.confirm("是否要删除这位成员", "注意", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      request({
        url: "/student",
        method: "delete",
        data: row
      })
      ElMessage({
        type: "success",
        message: "删除成功"
      })
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      })
    })
}
const stus = ref<student[]>([])
const username = useUserStore().username
if (username != "admin") {
  router.push({ path: "/" })
  ElMessageBox.alert("点击ok返回测试界面", "非管理员不可点入", {
    confirmButtonText: "OK"
  })
}
request({
  url: "/students",
  method: "get"
}).then((resp) => {
  stus.value = resp.data.students
  console.log(stus)
})
const drawer2 = ref(false)
function cancelClick() {
  drawer2.value = false
}
const stud = reactive({
  stu_id: "",
  stu_name: "",
  class_name: "",
  dep_name: "",
  col_name: "",
  result: ""
})
function add() {
  stud.stu_id = ""
  stud.stu_name = ""
  stud.class_name = ""
  stud.dep_name = ""
  stud.col_name = ""
  stud.result = ""
}
const addRules = reactive<FormRules>({
  stu_id: [
    {
      required: true,
      message: "请输入学号",
      trigger: "blur"
    }
  ],
  stu_name: [
    {
      required: true,
      message: "请输入姓名",
      trigger: "blur"
    }
  ],
  col_name: [
    {
      required: true,
      message: "请输入学院",
      trigger: "blur"
    }
  ],
  dep_name: [
    {
      required: true,
      message: "请输入专业",
      trigger: "blur"
    }
  ],
  class_name: [
    {
      required: true,
      message: "请输入班级",
      trigger: "blur"
    }
  ]
})
function confirmClick() {
  ElMessageBox.confirm(`是否增加该学生`).then(() => {
    console.log(stud)
    request({
      url: "/student",
      method: "post",
      data: stud
    })
    drawer2.value = false
  })
}
</script>
